<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">key</button>

    <div>
        <h3>同网站</h3>
        <p>
            <a href="./01 复习.html">同目录</a>
            <a target="_blank" href="./01 复习.html">同目录_外</a>
        </p>
        <p>
            <a href="../../day06/html/01 复习.html">其他目录</a>
            <a target="_blank" href="../../day06/html/01 复习.html">其他目录_外</a>
        </p>
    </div>

    <div>
        <h3>不同网站</h3>
        <p>
            <a href="https://www.baidu.com">百度</a>
        </p>
    </div>
</body>
<script>
    // 如何使用WebStorage?
    // HTML5的WebStorage提供了两种API(存储方式)：localStorage（本地存储）和sessionStorage（会话存储）  => 全局对象
    // 2. JS查找   
    // console.log(localStorage);  // window.localStorage
    console.log(sessionStorage);  // window.sessionStorage


    // localStorage（本地存储）和sessionStorage（会话存储）的属性和方法
    // localStorage（本地存储）和sessionStorage 全局对象 => 用户本地存储文本数据 => 键值只能是字符串类型


    // 属性:
    // length  => 表长度,存储数据的条数

    // 方法:
    // setItem(key,val) 对应键名存储键值(没有就新增,有就修改  键值只能是字符串类型)
    // getItem(key)     对应键名获取数据
    // removeItem(key)  对应键名删除数据
    // clear()          清除所有数据
    // key(index)       传入一个索引(下标),返回对应的键名  

    // localStorage（本地存储）和sessionStorage 全局对象
    // 对象的语法:  
    // 取值:  localStorage.key   localStorage["key"]
    // 赋值:  localStorage.key   localStorage["key"]
    // 删除:  delete  localStorage.key  


    // localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
    // localStorage除非主动删除数据，否则数据永远不会消失。
    // localStorage数据可以跨页面  跨窗口(同页面不同窗口),但是不能跨网站


    // sessionStorage的生命周期是仅在当前窗口会话下有效, 关闭会话窗口就失效了。 (同网站, 同窗口)
    // sessionStorage引入了一个“浏览器窗口会话”的概念，sessionStorage是在同源(同一个域名下)的窗口中始终存在的数据。
    // 只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源(同一个服务器目录 / 相同的网站)另一个页面，数据依然存在。
    // 但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开新的窗口但是同一个页面，sessionStorage也是不一样的

    // sessionStorage 仅在当前窗口会话下有效,关闭会话窗口就失效了  => 1. 同窗口,同网站(站点)下的其他页面时可以共享数据的   不同窗口 => 数据无法共享  





    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];
    var keyBtn = document.getElementsByClassName("key")[0];


    setBtn.onclick = function () {
        sessionStorage.setItem("user", "a123123");
        sessionStorage.setItem("pwd", "123123");
        sessionStorage.phone = "17386141517";
        sessionStorage.email = "a123123@qq.com";

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        sessionStorage.setItem("arr", JSON.stringify(arr));
        sessionStorage.setItem("obj", JSON.stringify(obj));
    }

    getBtn.onclick = function () {
        console.log(sessionStorage);  // window.sessionStorage

        console.log(sessionStorage.getItem("user"));
        console.log(sessionStorage.getItem("pwd"));
        console.log(sessionStorage.phone);
        console.log(sessionStorage.email);
        console.log(JSON.parse(sessionStorage.arr));
        console.log(JSON.parse(sessionStorage.obj));
    }


    editBtn.onclick = function () {
        sessionStorage.setItem("user", "bbbbbbb");
        sessionStorage.setItem("pwd", "321321");
        sessionStorage.phone = "17386112233";
        sessionStorage.email = "a321132@qq.com";

        var arr = [3, 1, 2];
        var obj = { a: 2, b: 4 };
        sessionStorage.setItem("arr", JSON.stringify(arr));
        sessionStorage.setItem("obj", JSON.stringify(obj));
    }

    delBtn.onclick = function () {
        sessionStorage.removeItem("user");
        sessionStorage.removeItem("pwd");
        delete sessionStorage.phone;
        delete sessionStorage.email;
        delete sessionStorage.arr;
        delete sessionStorage.obj;
    }

    keyBtn.onclick = function () {
        // console.log("遍历sessionStorage");

        // for (var key in sessionStorage) {
        //     console.log(key);
        // }

        for (var i = 0; i < sessionStorage.length; i++) {  // 0 - (len-1)
            var key = sessionStorage.key(i);

            var val = sessionStorage.getItem(key);
            var val = sessionStorage[key];

            console.log(key, val);

        }

    }



</script>

</html>